<template>
  <view class="contents-box"  @click="handleClick(data)">
    <view style="card-box" >
      <view class="title">
        设备：{{data.name}}
        <!-- <u-icon class='iconleft' name="arrow-right-double" size="28"></u-icon> -->
        <view class="iconleft" style="color: #ffffff;">{{data.status}}</view>
      </view>
      <!-- <view class="lineInCard"> -->
      <!-- {{data.productId}} -->
      <!-- </view> -->
      <view class="detail" style="float:left">
        <view class="time">
          <image src="../../static/images/number.png" class="imageBg" />
          <view class="text" style="width:70%">序列号：{{data.sn}}</view>
        </view>
        <view class="time">
          <image src="../../static/images/guige.png" class="imageBg" />
          <view class="text">型号规格：{{data.code}}</view>
        </view>
      </view>
     
    </view>
    <view    class="image-box">
         <image
 
      mode="aspectFill"
   
      @click.stop="handleImage(fileUrl+imgsrc)"
      :src="fileUrl+imgsrc"
    />
    </view>

   <!-- <view class="bottombox" @click.stop='allimage(data)' > 
  <text class="sumarry" style="font-size:20rpx;">编辑</text>
</view>
<view class="bottombox1" @click.stop='handleClick(data)'  > 
 <text style="font-size:20rpx">删除</text>
</view>
</template>
 -->
<view class="bottombox2" @click.stop='handleClick(data)'  > 
 <text style="font-size:20rpx">详情</text>
</view>
  </view>
</template>
<script>
import { productProperty } from "@/api/index.js";
export default {
  props: {
    data: {
      type: Object,
      default: 0
    },
    id: {
      type: String,
      default: ""
    },
    timeone: {
      type: String,
      default: ""
    },
    hour: {
      type: String,
      default: ""
    },
    minute: {
      type: String,
      default: ""
    },
    second: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      src: "./1.png",
      remark: "",
      imgsrc: ""
    };
  },
  created() {
    // console.log(this.data);
    productProperty(this.data.productId).then(res => {
      // this.imgsrc = res.rows[2].productPropertyValueVOS[0].value
      res.rows.forEach(item => {
        if (item.productPropertyValueVOS[0].propertyName == "产品照片") {
          this.imgsrc = item.productPropertyValueVOS[0].value;
        }
      });
    });
  },
  methods: {
    handleClick(data) {
      uni.navigateTo({
        url:
          "/pages/detail/detail?taskDeviceId=" +
          data.id +
          "&Id=" +
          this.id +
          "&timeone=" +
          this.timeone +
          "&hour=" +
          this.hour +
          "&minute=" +
          this.minute +
          "&second=" +
          this.second
      });
    },
    handleImage(e) {
      // console.log(e, "214");
      var images = [];
      images.push(e);
      uni.previewImage({
        current: 0,
        urls: images,
        longPressActions: {
          itemList: ["保存图片"],
          success: data => {
            uni.saveImageToPhotosAlbum({
              //保存图片到相册
              filePath: payUrl,
              success: function() {
                uni.showToast({ icon: "success", title: "保存成功" });
              },
              fail: err => {
                uni.showToast({ icon: "none", title: "保存失败，请重新尝试" });
              }
            });
          },
          fail: function(err) {}
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.contents-box {
  width: 100% !important;
  margin-bottom: 20rpx;
  background-color: white;
  border: 1px solid #eee;
  padding: 20rpx 20rpx 80rpx 20rpx;
  border-radius: 25rpx;
  box-shadow: 0 0 20rpx #eee;
  display: flex;
  position: relative;
  // justify-content: space-between;
  // align-items: center;
  .card-box{
    width: 60%;
  }
  .image-box {
    width: 200rpx;
    height: 190rpx;
    image {
      width: 200rpx;
      height: 190rpx;
    }
  }

  .title {
    font-size: 34rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
    color: #333333;
    .iconleft {
      font-size: 22rpx;
      position: absolute;
      right: 0;
      top: 0;
      font-weight: 500;
      padding: 0rpx 30rpx;
      border-bottom-left-radius: 100rpx;
      border-top-right-radius: 32rpx;
      background: linear-gradient(-34deg, #1040be, #026dff);
    }
  }

  .detail {
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0px 30rpx 0px 0px;
    color: #717171;
    .time {
      display: flex;
      margin-bottom: 20rpx;

      .imageBg {
        width: 25rpx;
        height: 25rpx;
        margin-right: 5rpx;
        padding: 4rpx;
        //  line-height: 25rpx;
      }
      .text {
        line-height: 30rpx;
        font-size: 24rpx;
      }
    }
  }

  .bottom {
    padding-top: 10rpx;
    color: #111;
  }
}
.bottombox {
  margin-top: 15rpx;
  width:100%;
  height: 50rpx;
  position:absolute;
  background-color: rgba(16,91,245,74%);
  border-radius: 20px;
  color:white;
  width: 170rpx;
  display:flex;
  align-items:center;    /*垂直居中 */
 	justify-content:center;  
  right: 65%;
  bottom: 10%;
}

.bottombox1 {
   margin-top: 15rpx;
 width:100%;
  height: 50rpx;
  position:absolute;
  background-color: rgba(16,91,245,74%);
  border-radius: 20px;
  color:white;
  width: 170rpx;
  display:flex;
  align-items:center;    /*垂直居中 */
 	justify-content:center;  
  right: 35%;
    bottom: 10%;
}

.bottombox2 {
  margin-top: 15rpx;
  width:100%;
  height: 50rpx;
  position:absolute;
  background-color: rgba(16,91,245,74%);
  border-radius: 20px;
  color:white;
  width: 170rpx;
  display:flex;
  align-items:center;    /*垂直居中 */
 	justify-content:center;  
  right: 5%;
  bottom: 8%;
}
</style>
